import {Component} from "react";
import {Button, InputItem, List, Modal, Provider, Toast} from "@ant-design/react-native";
import {apiDomain, postData} from "../../common/api";
import {Dimensions, StyleSheet, ScrollView, View, Text, TextInput} from "react-native";
import formatDate2 from "../../common/dateUtil";
import DatePicker from "react-native-datepicker";

export default class Register extends Component {
    constructor(props) {
        super(props);
        this.state = {
            username: '',
            password: '',
            nickname: '',
            email: '',
            address: '',
            phone: '',
            birthday: ''
        }
    }

    componentDidMount() {
    }

    onAdd() {
        if (this.state.username === '' || this.state.password === '' || this.state.nickname === '' || this.state.email === '' || this.state.address === '' || this.state.phone === '') {
            Modal.alert('Error', "All info can not be empty", [
                {text: 'OK'},
            ])
            return;
        }
        const loading = Toast.loading('loading')
        const {navigation, route} = this.props
        postData(apiDomain + "/Index/registerUser", {
            username: this.state.username,
            password: this.state.password,
            nickname: this.state.nickname,
            email: this.state.email,
            address: this.state.address,
            phone: this.state.phone,
            birthday: formatDate2(this.state.birthday, "YYYY-MM-dd")
        }).then(res => {
            if (res.code === 200) {
                Modal.alert('Success', "Register success", [
                    {
                        text: 'OK', onPress: () => {
                            navigation.goBack()
                        }
                    },
                ])
            } else {
                Modal.alert('Error', res.msg, [
                    {text: 'OK'},
                ])
            }
        }).finally(() => {
            Toast.remove(loading)
        })
    }

    render() {
        return (
            <ScrollView
                style={{flex: 1, backgroundColor: '#fff'}}
                automaticallyAdjustContentInsets={false}
                showsHorizontalScrollIndicator={false}
                showsVerticalScrollIndicator={false}
            >
                <View style={{paddingLeft: 30, paddingRight: 30, paddingTop: 10}}>
                    <Text style={{fontSize: 16, color: '#a3a3a3'}}>
                        Username
                    </Text>
                    <TextInput style={{borderBottomWidth: 1, borderBottomColor: '#a3a3a3', paddingTop: 4, paddingBottom: 4, color: '#333', fontSize: 20, fontWeight: '500'}}
                               value={this.state.username}
                               onChange={(e) => {
                                   this.setState({
                                       username: e.target.value
                                   })
                               }} />
                </View>
                <View style={{paddingLeft: 30, paddingRight: 30, paddingTop: 10}}>
                    <Text style={{fontSize: 16, color: '#a3a3a3'}}>
                        Password
                    </Text>
                    <TextInput style={{borderBottomWidth: 1, borderBottomColor: '#a3a3a3', paddingTop: 4, paddingBottom: 4, color: '#333', fontSize: 20, fontWeight: '500'}} value={this.state.password}
                               onChange={(e) => {
                                   this.setState({
                                       password: e.target.value
                                   })
                               }}/>
                </View>
                <View style={{paddingLeft: 30, paddingRight: 30, paddingTop: 10}}>
                    <Text style={{fontSize: 16, color: '#a3a3a3'}}>
                        Nickname
                    </Text>
                    <TextInput style={{borderBottomWidth: 1, borderBottomColor: '#a3a3a3', paddingTop: 4, paddingBottom: 4, color: '#333', fontSize: 20, fontWeight: '500'}} value={this.state.nickname}
                               onChange={(e) => {
                                   this.setState({
                                       nickname: e.target.value
                                   })
                               }}/>
                </View>
                <View style={{paddingLeft: 30, paddingRight: 30, paddingTop: 10}}>
                    <Text style={{fontSize: 16, color: '#a3a3a3'}}>
                        Email
                    </Text>
                    <TextInput style={{borderBottomWidth: 1, borderBottomColor: '#a3a3a3', paddingTop: 4, paddingBottom: 4, color: '#333', fontSize: 20, fontWeight: '500'}} value={this.state.email}
                               onChange={(e) => {
                                   this.setState({
                                       email: e.target.value
                                   })
                               }}/>
                </View>
                <View style={{paddingLeft: 30, paddingRight: 30, paddingTop: 10}}>
                    <Text style={{fontSize: 16, color: '#a3a3a3'}}>
                        Address
                    </Text>
                    <TextInput style={{borderBottomWidth: 1, borderBottomColor: '#a3a3a3', paddingTop: 4, paddingBottom: 4, color: '#333', fontSize: 20, fontWeight: '500'}} value={this.state.address}
                               onChange={(e) => {
                                   this.setState({
                                       address: e.target.value
                                   })
                               }}/>
                </View>
                <View style={{paddingLeft: 30, paddingRight: 30, paddingTop: 10}}>
                    <Text style={{fontSize: 16, color: '#a3a3a3'}}>
                        Phone
                    </Text>
                    <TextInput style={{borderBottomWidth: 1, borderBottomColor: '#a3a3a3', paddingTop: 4, paddingBottom: 4, color: '#333', fontSize: 20, fontWeight: '500'}} value={this.state.phone}
                               onChange={(e) => {
                                   this.setState({
                                       phone: e.target.value
                                   })
                               }}/>
                </View>
                <View style={{paddingLeft: 30, paddingRight: 30, paddingTop: 10}}>
                    <Text style={{fontSize: 16, color: '#a3a3a3'}}>
                        Birthday
                    </Text>
                    <DatePicker
                        style={{width: width - 60}}
                        date={this.state.birthday}
                        mode="date"
                        placeholder=""
                        format="YYYY-MM-DD"
                        confirmBtnText="Confirm"
                        cancelBtnText="Cancel"
                        showIcon={false}
                        onDateChange={(date) => {this.setState({birthday: date})}}
                        customStyles={{
                            dateInput: {
                                borderWidth: 0,
                                borderBottomWidth: 1,
                                borderBottomColor: '#a3a3a3',
                                alignItems: 'flex-start'
                            },
                            dateText: {
                                color: '#333',
                                fontSize: 20,
                                fontWeight: '500'
                            }
                        }}
                    />
                </View>
                <Button
                    type="primary"
                    style={styles.addButton}
                    onPress={() => this.onAdd()}>
                    Register
                </Button>
            </ScrollView>
        )
    }
}

const {width, height} = Dimensions.get('window');

const styles = StyleSheet.create({
    container: {
        flexDirection: 'column'
    },
    addButton: {
        marginTop: 10,
        width: 0.8 * width,
        marginLeft: 0.1 * width,
        backgroundColor: 'rgb(0, 21, 41)',
        borderColor: 'rgb(0, 21, 41)'
    }
});

